import React, { Component } from 'react'
import { Button } from 'antd';

//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

import {
    createIncrementAction,
    createDecrementAction,
    createDecrementSyncAction
} from '../../redux/count_action';

class Count extends Component {

    //加法
    increment = () => {
        let { value } = this.selectNumber;
        this.props.increment(value*1);
    }
    // 减法
    decrement = () => {
        let { value } = this.selectNumber;
        this.props.decrement(value*1);
    }
    // 异步减法
    syncDecrement = () => {
        let { value } = this.selectNumber;
        this.props.syncDecrement(value*1,500);
    }
    render() {
        console.log(this.props);
        let { count } = this.props;
        return (
            <div>
                <h1>当前求和为：{ count }</h1>
                &nbsp;<select ref={(c)=>{this.selectNumber = c}}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <Button onClick={this.increment} type="primary">加</Button>&nbsp;
                <Button onClick={this.decrement} type="primary">减</Button>&nbsp;
                <Button onClick={this.syncDecrement} type="primary">异步减</Button>
            </div>
        )
    }
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(
    store => ({ count: store }),

    /* 
        mapDispatchToProps的一般写法
        dispatch => (
            {
                increment: number => dispatch(createIncrementAction(number)),
                decrement: number => dispatch(createDecrementAction(number)),
                syncDecrement:(number,time) => dispatch(createDecrementSyncAction(number,time)),
            }
        )
    */
    // mapDispatchToProps的简写
    {
        increment: createIncrementAction,
        decrement: createDecrementAction,
        syncDecrement: createDecrementSyncAction,
    }
)(Count)